<template>
	<view class="notice-details">
		<view class="no-header">
			<rich-text :nodes="data.content"></rich-text>
		</view>
		<view class="nav_li" v-if="data.name != '' && data.name !=null">获赠权益码</view>
		<view class="no-bottom" v-if="data.name != '' && data.name !=null ">
			<view class="no-bottom-title">
				{{data.name}}
			</view>
			<view class="copy-box" v-for="(item,index) in data.codeList" :key="index">
				<view class="copy-word">
					{{item}}
				</view>
				<image src="/static/my/copy.png" mode="widthFix" @click="copy(item)"></image>
			</view>
			<block v-if="data.notes != ''">
				<view class="no-line"></view>
				<view class="equity-description"  >
					<view class="ed-title">权益说明：</view>
					<view class="ed-content">{{data.notes}}</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:null,
				data:{
					content:'', //通知内容
					name:'',//权益名称
					code:'',//哈希码
					notes:'',//权益说明
					codeList:[]
				}
			}
		},
		onLoad(e) {
			this.id = e.id
			this.getNoticeDetails()
		},
		methods: {
			async getNoticeDetails(){
			   var res = await this.$api.getMessageDetail(this.id)
			  
			   if(res.result != ""){
				   this.data = res.result
				   // this.data.content = this.data.content.replace(/\<img/gi, '<img style=max-width:100%;height:auto;')
				   // this.data.content = this.imgTagAddStyle(this.data.content)
			   }
			   
			},
			imgTagAddStyle(htmlstr){
				//正则匹配所有img标签
				//var regex0 = new RegExp("(i?)(\<img)([^\>]+\>)","gmi");
				//正则匹配不含style="" 或 style='' 的img标签
				var regex1 = new RegExp("(i?)(\<img)(?!(.*?style=['\"](.*)['\"])[^\>]+\>)","gmi");
				//给不含style="" 或 style='' 的img标签加上style=""
				htmlstr = htmlstr.replace(regex1, "$2 style=\"\"$3");
				// console.log("增加style=\"\"后的html字符串："+htmlstr);
				//正则匹配含有style的img标签
				var regex2 = new RegExp("(i?)(\<img.*?style=['\"])([^\>]+\>)","gmi");
				//在img标签的style里面增加css样式(这里增加的样式：display:block;max-width:100%;height:auto;border:5px solid red;)
				htmlstr = htmlstr.replace(regex2, "$2max-width:100%;height:auto;$3");
				// console.log("在img标签的style里面增加样式后的html字符串："+htmlstr);
				return htmlstr;
			  },
			// 复制
			copy(text){
				if(text != ''){
					var _this = this
					 _this.$copyText(text).then(
                        res => {
                          uni.showToast({
                            title: '复制成功',
                            icon: 'none'
                          })
                        }
                      )
				}
			
			},
		}
	}
</script>

<style scoped>
	page{
		background: #FCFCFD;
	}
	.notice-details{
		padding-top: 40rpx;
		padding-bottom: 100rpx;
	}
	.no-header{
		width: 690rpx;
		box-shadow: 0px 8rpx 16rpx #EAEAEA;
		border-radius: 32rpx;
		padding: 40rpx 30rpx;
		box-sizing: border-box;
		margin: 0 auto;
		margin-bottom: 40rpx;
		background: #FFFFFF;
	}
	.nav_li {
		width: 180rpx;
		height: 146rpx;
		text-align: center;
		line-height: 146rpx;
		color: #999999;
		font-size: 34rpx;
		margin-left: 30rpx;
		padding-left: 30rpx;
		color: #222222;
		background-image: url('@/static/index/index-yuan.png');
		background-repeat: no-repeat;
		background-size: 48rpx 42rpx;
		background-position: 10rpx 44rpx;
		font-weight: 500;
	}
	.no-bottom{
		width: 690rpx;
		min-height: 482rpx;
		background: #FFFFFF url('@/static/my/news_d.png') no-repeat;
		background-size: 100% auto;
		background-position: top;
		box-shadow: 0px 8rpx 16rpx #EAEAEA;
		border-radius: 32rpx;
		padding: 28rpx;
		box-sizing: border-box;
		margin: 0 auto;
	}
	.no-bottom-title{
		text-align: center;
		width: 100%;
		padding-top: 40rpx;
		padding-bottom: 24rpx;
		font-size: 32rpx;		
		background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		text-fill-color: transparent;
	}
	.copy-box{
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 100%;
		box-shadow: 0px 0px 16rpx #EAEAEA;
		border-radius: 20rpx;
		background: #FFFFFF;
		padding: 24rpx 34rpx;
		box-sizing: border-box;
		margin-bottom: 24rpx;
	}
	.copy-box .copy-word{
		max-width: 468rpx;
		word-break: break-all;
		margin-right: 28rpx;
	}
	.copy-box image{
		width: 32rpx;
		height: 30rpx;
		margin-top: 10rpx;
	}
	.no-line{
		margin: 40rpx 0;
		width: 100%;
		height: 1rpx;
		background: #DCE3FA;
	}
	.ed-title{
		font-weight: 400;
		font-size: 28rpx;
		line-height: 40rpx;
		color: #222222;
		margin-bottom: 14rpx;
	}
	.ed-content{
		font-size: 30rpx;
		line-height: 48rpx;
		color: #555555;
	}
</style>
